<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input v-model="keyWord" type="text" placeholder="enter the name you search"/>&nbsp;
      <button @click="getUsers">Search</button>
    </div>
  </section>
</template>

<script>
import axios from "axios";
export default {
  name: "github-search",
  data() {
    return{
      keyWord:''
    }
  },
  methods:{
    getUsers() {
      this.$bus.$emit('updateUsersList',{isFirst:false,isLoading:true, errMsg:'',users:[]});
      axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response => {
        this.$bus.$emit('updateUsersList',{isLoading:false,errMsg:'',users:response.data.items});
      },err => {
        this.$bus.$emit('updateUsersList',{isLoading:false, errMsg:err.message,users:[]})
      })
    }
  }
}
</script>

<style scoped>

</style>